<template>
  <div class="">
    <!--核实整合-->
    <el-dialog class="m_dialog" :title="dialongTitle" :visible.sync="dialogVisible" width="800" append-to-body :before-close="cancel"
      :close-on-click-modal="false">
      <div class="content">
        <!-- 基础信息 -->
        <div class="content-box">
          <div class="box-heard">
            <CustomTitle title="基础信息"></CustomTitle>
          </div>
          <div class="box-body" style="min-height: 317px;">
            <BaseDescriptions :descConfig="descConfig" :descConfigItem="basisConfigItem" :descModel="descModel">
            </BaseDescriptions>
          </div>
        </div>
        <!-- 核实整改信息 -->
        <div v-show="isRegistrationShow">
          <div class="content-box">
            <div class="box-heard">
              <CustomTitle title="核实整改信息"></CustomTitle>
              <div v-show="isOverruleButtonShow" style="width:100%;display: flex;justify-content: flex-end;align-items: center;margin-bottom: 10px;">
                    <el-button @click="overruleButton()" class="btn_primary">
                      驳回信息
                    </el-button>
                </div>
            </div>
            <div class="box-body" style="min-height: 317px;">
              <custom-form ref="form" :formModel="formModel" :formItemConfig="registrationFormItemConfig"
                :formRules="formRules" label-width="120px" label-position="left" />
            </div>
          </div>
        </div>
        <!-- 整改信息和验收结果 -->
        <div v-show="isOverruleINfoShow">
          <div class="content-box">
            <div class="box-heard">
              <CustomTitle title="整改信息"></CustomTitle>
              
            </div>
            <div class="box-body" style="min-height: 317px;">
              <BaseDescriptions :descConfig="descConfig" :descConfigItem="rectificationConfigItem" :descModel="descModel">
              </BaseDescriptions>
            </div>
          </div>

          <div class="content-box">
            <div class="box-heard">
              <CustomTitle title="验收结果"></CustomTitle>
            </div>
            <div class="box-body" style="min-height: 317px;">
              <BaseDescriptions :descConfig="descConfig" :descConfigItem="acceptanceConfigItem" :descModel="descModel">
              </BaseDescriptions>
            </div>
          </div>
        </div>
        
      </div>
      <div slot="footer" class="dialog-footer">
          <el-button v-show="isRegistrationShow" @click="cancel" class="btn_cancel">取 消</el-button>
          <el-button v-show="isOverruleINfoShow" @click="backRegistration()" class="btn_cancel">返 回</el-button>
          <!-- <el-button v-show="isRegistrationShow" type="primary" @click="submitFrom" class="btn_primary">提交</el-button> -->
          <el-button v-show="isRegistrationShow" type="primary" @click="submitFrom"  class="btn_primary">提交</el-button>
        </div>
    </el-dialog>
  </div>
</template>
    
<script>
import { mapState } from 'vuex';
import BaseDescriptions from '@/components/PageContent/BaseDescriptions.vue';

export default {
  name: 'operationDetail',

  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    //   titleIndex: {
    //     type: Number | String,
    //     default: 0,
    //   },
      descData: {
        type: Object,
        default: () => {},
      },
    //   dictMap: {
    //     type: Object,
    //     default: () => {},
    //   },
  },
  data() {
    return {
      // 核实整改信息
      isRegistrationShow:true,
      // 整改信息和验收结果
      isOverruleINfoShow:false,
      // 驳回按钮显示
      isOverruleButtonShow:true,
      // 弹窗标题
      dialongTitle:"核实整改",
      descConfig: {
        size: 'medium',
        column: '2',
      },
      formModel:{},
      // 表单验证
      formRules: {
        deviceTypeKey: {
          required: true,
          message: "设备类型字符串",
          trigger: "blur",
        },
        deviceTypeName: {
          required: true,
          message: "类型名称不能为空",
          trigger: "blur",
        },
      },
      descModel: {
        infoId: '',
        userName: '',
        ipaddr: '',
        status: '',
        accessTime: '',
      },
      //核实整改信息配置
      registrationFormItemConfig: [
        {
          label: '隐患类型',
          prop: 'deviceTypeKey',
          span: 24,
          clearable: true,
          disabled: true
        },
        {
          label: '整改内容',
          prop: 'deviceTypeName',
          span: 24,
          clearable: true
        },
        {
          label: '整改图片',
          prop: 'num',
          span: 24,
          component: 'BaseUpload',
          clearable: true,
        },
      ],
      // 基础信息配置
      basisConfigItem: [
        {
          fieIdName: 'infoId',
          label: '隐患事项',
          span: 2,
        },
        {
          fieIdName: 'userName',
          label: '所属项目点位',
          span: 2,
        },
        {
          fieIdName: 'ipaddr',
          label: '发现人员',
          span: 2,
        },
        {
          fieIdName: 'status',
          label: '发现时间',
          span: 2,
          slotName: 'status',
        },
        {
          fieIdName: 'msg',
          label: '隐患内容',
          span: 2,
        },
        {
          fieIdName: 'accessTime',
          label: '隐患图片',
          component: 'BaseImages',
          span: 2,
        },
      ],
      // 整改信息配置
      rectificationConfigItem: [
        {
          fieIdName: 'infoId',
          label: '处理人员',
          span: 2,
        },
        {
          fieIdName: 'userName',
          label: '处理时间',
          span: 2,
        },
        {
          fieIdName: 'userName',
          label: '隐患类型',
          span: 2,
        },
        {
          fieIdName: 'userName',
          label: '整改内容',
          span: 2,
        },
        {
          fieIdName: 'ipaddr',
          label: '整改图片',
          component: 'BaseImages',
          span: 2,
        },
      ],
      // 验收结果配置
      acceptanceConfigItem:[
        {
          fieIdName: 'infoId',
          label: '驳回人员',
          span: 2,
        },
        {
          fieIdName: 'userName',
          label: '驳回时间',
          span: 2,
        },
        {
          fieIdName: 'userName',
          label: '驳回结果',
          span: 2,
       },
      ]
  }
  },
  computed: {
    ...mapState('dialog', ['dialogTitles']),
  },
  watch: {
    descData: {
      deep: true,
      immediate: true,
      handler() {
        this.descModel = JSON.parse(JSON.stringify(this.descData));
      },
    },
  },
  created() { 
   
  },
  mounted() { },
  methods: {
    /**
     * 更新信息
     */
    getRectificationInfo(){
      console.log(this.descData)
    },
    // 驳回按钮
    overruleButton() {
      this.isRegistrationShow = false;
      this.isOverruleINfoShow = true;
      this.dialongTitle = "驳回信息"
    },
    // 返回核实整改
    backRegistration() {
      this.isRegistrationShow = true;
      this.isOverruleINfoShow = false;
      this.dialongTitle = '核实整改';
    },
    cancel() {
      this.$emit('cancel');
    },
    // 提交
    submitFrom(){
      console.log(this.descModel)
    }
  },
  components: {
    BaseDescriptions,
  },
};
</script>
    
<style lang="less" scoped></style>
    